<template>
	<view class="shop-index">
		<u-search :placeholder="searchData.placeholder" @click="search"></u-search>
		<view class="content display-flex">
			<view class="left">
				<view class="item" :class="{active:menuActive == index}" v-for="(item, index) in menuData.list" :key="item.name" @click="handleMenuClick(index)">
					<text class="font-333">{{item.name }}</text>
				</view>
			</view>
			<view class="right display-flex flex-direction-column justify-between" >
				<scroll-view class="right-scroll flex" :scroll-y="true"   v-if="menuActive == 0">
					<image :src="IMG_URL + '/shop/banner.png'" class="banner"/>
					<view>
						<view class="section">
							<view class="title font-28 display-flex align-center justify-between">
								<text class="font-bold">纱支</text>
								<view class="font-26" @click="openAll('a')">{{ specData.showAlla?'收起':'展开'}}</view>
							</view>
							<view class="list list0 display-flex flex-wrap" :class="{'activeA':specData.showAlla}">
								<view class="item" :class="{'active':item.active === true}" v-for="(item, index) in specData.a" :key="item.id" @click="select('a', index)">
									<text class="font-24 display-block">{{ item.name }}</text>
								</view>
							</view>
						</view>
						<view class="section">
							<view class="title font-bold font-28">工艺</view>
							<view class="list display-flex flex-wrap">
								<view class="item" :class="{'active':item.active === true}"  v-for="(item, index) in specData.b" :key="item.id" @click="select('b', index)">
									<text class="font-24 display-block">{{ item.name }}</text>
								</view>
							</view>
						</view>
						<view class="section">
							<view class="title font-bold font-28">工序</view>
							<view class="list display-flex flex-wrap">
								<view class="item" :class="{'active':item.active === true}"  v-for="(item, index) in specData.c" :key="item.id" @click="select('c', index)">
									<text class="font-24 display-block">{{ item.name }}</text>
								</view>
							</view>
						</view>
						<view class="section">
							<view class="title font-bold font-28">用途</view>
							<view class="list display-flex flex-wrap">
								<view class="item" :class="{'active':item.active === true}"  v-for="(item, index) in specData.d" :key="item.id" @click="select('d', index)">
									<text class="font-24 display-block">{{ item.name }}</text>
								</view>
							</view>
						</view>
						<view class="section">
							<view class="title font-bold font-28">产地</view>
							<view class="list display-flex flex-wrap">
								<view class="item" :class="{'active':item.active === true}"  v-for="(item, index) in specData.e" :key="item.id" @click="select('e', index)">
									<text class="font-24 display-block">{{ item.name }}</text>
								</view>
							</view>
						</view>
						<view class="section">
							<view class="title font-bold font-28">漂染性</view>
							<view class="list display-flex flex-wrap">
								<view class="item" :class="{'active':item.active === true}"  v-for="(item, index) in specData.f" :key="item.id" @click="select('f', index)">
									<text class="font-24 display-block">{{ item.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn-box" v-if="menuActive == 0">
					<view  class="shop-bottom-btn" @click="check">
						<text>现货搜索</text>
					</view>
				</view>
				<view class="text-center mt-30" v-if="menuActive == 1">
				<!-- 	<text class="font-28 font-666">暂无内容，敬请期待</text> -->
					<image :src="IMG_URL + '/shop/mianliao.png'" class="await"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { goods } from '@/api'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	//import { SpecData } from '@/@type/goods'
	import { util, tip, nav, system } from '@/utils'
	import { IMG_URL } from '@/utils/constant'
	
	const menuActive = ref(0)
	
	const menuData = reactive({
		list:[{
			name:'纱线',
		},{
			name:'面料',
		}]
	})
	
	const specData: any = reactive({
		query:{},
		a:[],
		b:[],
		c:[],
		d:[],
		e:[],
		f:[],
		showAlla:false,
		//actives:{}
	})
	
	const searchData = reactive({
		placeholder:'品种、规格、工艺等'
	})
	
	onLoad(() => {
		goodsSpec()
	})
	
	onShow(() => {
		if(nav.isLogin()) {
			shoppingCart()
		} else {
			system.setTabBarBadge({
			  index: 2,
			  text: '0'
			})
		}
	})
	
	const shoppingCart = () => {
		goods.getShoppingCart({noJump:true}).then((res:any) => {
			const len = res.data && res.data.length > 9?'9+': res.data.length.toString()
			system.setTabBarBadge({
			  index: 2,
			  text: len
			})
		})
	}
	
	const goodsSpec = () => {
		goods.getGoodsSpec(specData.query).then((res:any) => {
			specData.a = res.data.a.map((i:any) => {return {...i,active:false}})
			specData.b = res.data.b.map((i:any) => {return {...i,active:false}})
			specData.c = res.data.c.map((i:any) => {return {...i,active:false}})
			specData.d = res.data.d.map((i:any) => {return {...i,active:false}})
			specData.e = res.data.e.map((i:any) => {return {...i,active:false}})
			specData.f = res.data.f.map((i:any) => {return {...i,active:false}})
		})
	} 
	
	const search = () => {
		navigateTo('/pages/shop/search?placeholder=' + searchData.placeholder + '&prevPage=shopIndex')
	}
	
	const openAll = (key:string) => {
		if(key == 'a') {
			specData.showAlla = !specData.showAlla
		} 
	}
	
	const select = (key: any, index:number) => {
		specData[key][index].active = !specData[key][index].active
	}
	
	const handleMenuClick = (index:number) => {
		menuActive.value = index
	}
	
	const check = () => {
		const list:any = {}
		list.a = specData.a.filter((i:any) => i.active === true).map((j:any) => j.name)
		list.b = specData.b.filter((i:any) => i.active === true).map((j:any) => j.name)
		list.c = specData.c.filter((i:any) => i.active === true).map((j:any) => j.name)
		list.d = specData.d.filter((i:any) => i.active === true).map((j:any) => j.name)
		list.e = specData.e.filter((i:any) => i.active === true).map((j:any) => j.name)
		list.f = specData.f.filter((i:any) => i.active === true).map((j:any) => j.name)
		//if(list.a.length > 0 || list.b.length > 0 || list.c.length > 0 || list.d.length > 0 || list.e.length > 0 || list.f.length > 0) {
			const info = util.setObjParams(list)
			navigateTo('/pages/shop/goodsList?info=' + info)
		// } else {
		// 	tip.showToast('请先选择一项!')
		// }
		
	}
	
	// const reset = () => {
	// 	specData.a = specData.a.map((i:any) => {return {...i,active:false}})
	// 	specData.b = specData.b.map((i:any) => {return {...i,active:false}})
	// 	specData.c = specData.c.map((i:any) => {return {...i,active:false}})
	// 	specData.d = specData.d.map((i:any) => {return {...i,active:false}})
	// 	specData.e = specData.e.map((i:any) => {return {...i,active:false}})
	// 	specData.f = specData.f.map((i:any) => {return {...i,active:false}})
	// }
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.shop-index {
		height:100%;
		.content {
			height:calc(100% - 100rpx);
			background-color: #fff;
			.left {
				width:230rpx;
				background-color: #F2F3F7;
				.item {
					color:$uni-text-color;
					padding:40rpx 0 38rpx;
					text-align:center;
					box-sizing: border-box;
					border-radius: 20px 0px 0px 20px;
					font-size:$uni-font-size-base;
					text {
						text-align:left;
						width:100rpx;
						display:inline-block;
					}
					&.active {
						background-color:#fff;
						font-weight:bold;
						font-size:$uni-font-size-lg;
						
						text {
							position: relative;
						}
					}
				}
			}
			.right{
				width: 520rpx;
				background-color:#fff;
				.right-scroll {
					height:calc(100% - 150rpx);
					background-color:#fff;
					.banner {
						border-radius: 16rpx;
						width: 455rpx;
						height: 155rpx;
						margin-top: 30rpx;
						padding:0 30rpx;
					}
					.section {
						padding:0 0 0 30rpx;
						margin-top:40rpx;
						.title {
							padding-right:30rpx;
							position: relative;
						}
						.list {
							
							margin-top:7rpx;
							&.list0 {
								height:150rpx;
								overflow: hidden;
							}
							&.activeA {
								height:auto;
							}
							.item {
								width: 144rpx;
								height: 54rpx;
								line-height: 52rpx;
								text-align:center;
								color:$uni-text-color;
								background: #F4F4F4;
								border-radius: 27rpx;
								box-sizing: border-box;
								margin-top:18rpx;
								margin-right:10rpx;
								border:1rpx solid #F4F4F4;
								&.active {
									color:#0888FF;
									border:1rpx solid #0888FF;
									background: rgba(8,136,255,0.06);
								}
							}
						}
						
					}
				}
				.await {
					width: 455rpx;
					height:280rpx;
				}
				.btn-box {
					width:100%;
					margin:0 auto;
					text-align: center;
					padding:30rpx 0;
					.shop-bottom-btn {
						width:450rpx;
						height:78rpx;
						line-height: 78rpx;
						color: #fff;
						font-weight: bold;
						font-size: $uni-font-size-base;
						border-radius:39rpx;
						text-align: center;
						margin:0 auto;
						background: linear-gradient(90deg, #08BCFF, #0888FF);
					}
				}
				
			}
		}
		
	}
</style>
